<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>cate</title>
    <link rel="stylesheet" type="text/css" href="../jquery-easyui-1.5.3/themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="../jquery-easyui-1.5.3/themes/icon.css">
    <link rel="stylesheet" type="text/css" href="../jquery-easyui-1.5.3/demo/demo.css">
    <script type="text/javascript" src="../jquery-easyui-1.5.3/jquery.min.js"></script>
    <script type="text/javascript" src="../jquery-easyui-1.5.3/jquery.easyui.min.js"></script>
    <script type="text/javascript" src="../js/jquery.serializeObject.js"></script>
    <script type="text/javascript" src="../js/xheditor-1.2.2/xheditor-1.2.2.min.js"></script>
    <script type="text/javascript" src="../js/xheditor-1.2.2/xheditor_lang/zh-cn.js"></script>
</head>
<body>

    <div class="easyui-layout" style="width:700px;height:350px;" data-options="fit:true"s>
        <!--左边分类栏-->
        <div id="p" data-options="region:'west'" title="West" style="width:20%;padding:10px">
            <ul id="tt"></ul>
        </div>

        <!--右边数据栏-->
        <div data-options="region:'center'" title="Center">
            <table id="dg"></table>
        </div>
    </div>

    <!--点击编辑弹窗信息-->
    <div id="dlg" class="easyui-dialog" title="编辑用户信息" data-options="iconCls:'icon-edit',closed:true" style="width:400px;padding:10px">
        <form id="ff" method="post">
            <div style="margin-bottom:20px">
                <input class="easyui-textbox" name="title" style="width:100%" data-options="label:'Title:',required:true">
            </div>
            <div style="margin-bottom:20px">
                <input class="easyui-textbox" name="author" style="width:100%" data-options="label:'Author:'">
            </div>
            <div style="margin-bottom:20px">
                <input class="easyui-textbox" name="content" style="width:100%;height:60px" data-options="label:'Content:',multiline:true">
            </div>
            <!--加入id的作用是为了防止修改的时候更新它的id-->
            <div style="margin-bottom:20px">
                <input class="easyui-textbox" name="_id" style="width:100%" data-options="label:'Id:'">
            </div>
        </form>
        <div style="text-align:center;padding:5px 0">
            <a href="javascript:void(0)" class="easyui-linkbutton" onclick="submitForm()" style="width:80px">Submit</a>
            <a href="javascript:void(0)" class="easyui-linkbutton" onclick="clearForm()" style="width:80px">Clear</a>
        </div>
    </div>

    <!--评论弹窗-->
    <div id="dlg-c" class="easyui-dialog" title="编辑用户信息" data-options="iconCls:'icon-edit',closed:true" style="width:400px;padding:10px">
        <table id="dg-c"></table>
        <textarea class="xheditor">

        </textarea>

    </div>




<script type="text/javascript">

	//tree
	$('#tt').tree({
		method:'get',
		url:'http://localhost:3000/cate/list',
		onClick(node){//点击获取节点id
			var  title = node.text;
			var  id=node._id;
			addTab(title, 'temp/layout-domestic.html?id='+id, null, 1)
		}
	});

//新闻数据栏
	$('#dg').datagrid({
		pagination:true,//设置分页栏，无需html代码
		fit:true,
		checkbox:true,//该行被选中
		method:'post',//默认posts
		url:'http://localhost:3000/news/list',//建好后台后用的
		// url:'../data/datagrid_data.json',//未建数据的时候测试用的
		columns:[[
			{field:'ck',checkbox:true},
			{field:'title',title:'标题',width:200},
			{field:'author',title:'作者',width:80},
			{field:'date',title:'发布时间',width:200},
			{field:'commentCount',title:'评论数',width:80},
			//自己添加的表内容
			{field:'opt',title:'操作',width:200,
				formatter:function (value,row,index) {
					return "<a href='javascript:void(0)' onclick='editNewsData("+index+")'>编辑</a>&nbsp;&nbsp;<a href='javascript:void(0)' onclick='deleteNewsData("+index+")'>删除</a>&nbsp;&nbsp;<a href='javascript:void(0)' onclick='commentEdit("+index+")'>查看评论</a>"
				}
			},
		]]
	});

	//点击编辑按钮
    function editNewsData(index) {
//		console.log(index);//index为该行在这一页的下标，row为当前行的表单数据
        var row = $("#dg").datagrid('getRows');
//		console.log(rows[index]);//该行的信息
        $('#dlg').dialog('open')
        $('#ff').form('load',row[index]);//加载该行的数据
	}

	//点击删除按钮
    function deleteNewsData(index) {
		var rows = $("#dg").datagrid('getRows');
		var idOne = rows[index]._id;
		$.ajax({//删除
			method:'delete',
			url:'http://localhost:3000/news/data/'+idOne,
			data:{ids:idOne.toString()}
		}).done(function (res) {
			if(res.status === 200){
				$.messager.show({
					title:'信息提示',
					msg:'删除数据成功',
					showType:'show'
				})
			}else{
				$.messager.show({
					title:'信息提示',
					msg:'请选择要删除的数据',
					showType:'show'
				})
			}
			$('#dg').datagrid("reload")
			console.log(11);
		})

	}

	//add弹窗
	function submitForm(){
		$('#ff').form('submit',{
			onSubmit:function () {
				if($(this).form('enableValidation').form('validate')){
					//ajax新增提交
					var data = $('#ff').serializeObject();
//						console.log(data);
					if(data._id&&data._id.trim().length>0){//如果id存在点提交的时候就修改内容
						$.ajax({//修改新增数据
							method:'put',
							url:'http://localhost:3000/news/data/'+data._id,
							data:data,
						}).done(function (res) {//添加完成之后，删除弹窗，刷新改页面更新添加的数据
							$('#dlg').dialog('close');
							$('#dg').datagrid('reload');
						})

					}else{//id不存在，增加内容
						delete data._id;//注意新增一定要删掉data._id，否则新增不进去
						$.ajax({//提交新增数据
							method:'post',
							url:'http://localhost:3000/news/data',
							data:data,
						}).done(function (res) {//添加完成之后，删除弹窗，刷新改页面更新添加的数据
							$('#dlg').dialog('close');
							$('#dg').datagrid('reload');
						})
					}

				}else{
					$.messager.show({
						title:'信息提示',
						msg:'提交有误，请重新输入',
						showType:'show'
					});
				}
			}
		});
	}
	function clearForm(){
		$('#ff').form('clear');
	}

	//点击评论弹出对话框
    function commentEdit(index) {
		var row = $("#dg").datagrid('getRows');
		var  title = row[index].title;
		var  id=row[index]._id;
//		console.log(id);
////			console.log(id);
		addTab(title, 'temp/layout-comment.html?id='+id, null, 1)
//		$('#dlg-c').dialog('open');
//		$('#elm1').xheditor();//编辑器
	}


	//添加tab
	function addTab(title, href, iconCls, iframe){
		var tabPanel = parent.$('#wu-tabs');
		if(!tabPanel.tabs('exists',title)){
			var content = '<iframe scrolling="auto" frameborder="0"  src="'+ href +'" style="width:100%;height:100%;"></iframe>';
			// iframe模式
			if(iframe){
				tabPanel.tabs('add',{
					title:title,
					content:content,
					iconCls:iconCls,
					fit:true,
					cls:'pd3',
					closable:true
				});
			}
			else{
				tabPanel.tabs('add',{
					title:title,
					href:href,
					iconCls:iconCls,
					fit:true,
					cls:'pd3',
					closable:true
				});
			}
		}
		else
		{
			tabPanel.tabs('select',title);
			var current_tab = tabPanel.tabs('getSelected');
			tabPanel.tabs('update',{
				tab : current_tab,
				options: {
					content: '<iframe scrolling="auto" frameborder="0"  src="'+ href +'" style="width:100%;height:100%;"></iframe>'
				}
			});
		}
	}

	//跳转到评论模块
	function Comment(index){
		var rows = $("#dg").datagrid('getRows');
		var currentRow = rows[index];
		var commentUrl = "temp/layout-comment.html?newsid=" + currentRow._id;
		addTab('Comment',commentUrl,null,true);
	}


	//评论框
	//评论框
//	$('#dg-c').datagrid({
//		pagination:true,//设置分页栏，无需html代码
//		fit:true,
//		checkbox:true,//该行被选中
//		method:'post',//默认posts
//		url:'http://localhost:3000/news/list',//建好后台后用的
//		// url:'../data/datagrid_data.json',//未建数据的时候测试用的
//		columns:[[
//			{field:'ck',checkbox:true},
//			{field:'author',title:'作者',width:80},
//			{field:'content',title:'内容',width:80},
//			{field:'date',title:'发布时间',width:200},
//			//自己添加的表内容
//			{field:'opt',title:'操作',width:200,
//				formatter:function (value,row,index) {
//					return "<a href='javascript:void(0)' onclick='editNewsData("+index+")'>Edit</a>&nbsp;&nbsp;<a href='javascript:void(0)' onclick='deleteNewsData("+index+")'>Delete</a>&nbsp;&nbsp;<a href='javascript:void(0)' onclick='commentEdit()'>Comment</a>"
//				}
//			},
//		]]
//	});













</script>
</body>
</html>
